<template>
  <div style="display: inline-block; margin-left: 10px" v-if="isOperate()">
    <template v-if="type === 1">
      <el-button @click="dispositionInventoryLocation(suitId)" type="danger">{{$t('table.inventoryLocation.配置库位')}}</el-button>
    </template>
    <template v-else>
      <span style="cursor: pointer;" @click="dispositionInventoryLocation(suitId)">
        <i class="el-icon-edit"></i>
      </span>
    </template>


    <el-dialog
      :title="$t('table.inventoryLocation.配置库位')"
      :visible.sync="dispositionInventoryLocationDialog"
      :modal-append-to-body="false"
      width="1000px"
    >
      <div style="margin-top: -20px; font-size: 16px; color: black; text-align: left;">
        <div style="margin-left: 15px;">
          <template v-if="strLoading">
            <span>{{$t('table.inventoryLocation.存放库位')}}： <i class="el-icon-loading"></i></span>
          </template>
          <template v-else>
            <span>{{$t('table.inventoryLocation.存放库位')}}： {{inventoryLocationStr}}</span>
          </template>
        </div>
        <div style="margin-left: 15px; margin-top: 20px;">
          <span>{{$t('table.inventoryLocation.库位类型')}}：</span>
          <el-radio-group v-model="show_type" @change="changeOption()">
            <el-radio :label="1">
              {{$t('table.inventoryLocation.一件代发')}}
            </el-radio>
            <el-radio :label="2">
              {{$t('table.inventoryLocation.中转送仓')}}
            </el-radio>
            <el-radio :label="3">
              {{$t('table.inventoryLocation.官方仓直送')}}
            </el-radio>
          </el-radio-group>
        </div>
        <div style="margin-top: 20px;">
          <span>{{$t('table.inventoryLocation.选择新库位')}}：</span>
          <el-select
            class="mgr10"
            v-loading="strLoading"
            style="width: 150px;"
            v-for="optionsItem in options"
            :key="optionsItem.info.levelNum"
            v-model="optionsItem.info.value"
            :placeholder="$t('table.inventoryLocation.请选择')"
            @change="saveInventoryLocationOptions(optionsItem.info.levelNum, optionsItem.info.value)"
          >
            <el-option :label="$t('table.inventoryLocation.请选择') + optionsItem.info.levelName" :value="0"></el-option>
            <el-option
              v-for="item in optionsItem.data"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

        </div>
        <div style="margin-top: 10px; font-size: 12px; margin-left: 100px; color: #7f7f7f;">
          {{$t('table.inventoryLocation.没有合适的库位？')}}
          <span style="color: #0099FF; cursor: pointer;" @click="jumpInventoryLocationList">
            {{$t('table.inventoryLocation.去创建新库位')}}
          </span>
        </div>
      </div>

      <div slot="footer">
        <el-button size="large" @click="dispositionInventoryLocationDialog = false">{{$t('table.inventoryLocation.取消')}}</el-button>
        <el-button size="large" type="primary" @click="dispositionInventoryLocationInfoData" :loading="dispositionInventoryLocationInfoLoading" :disabled="inventoryLocationArr.length <= 0">{{$t('table.inventoryLocation.确定')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {getGoodsInventoryLocation, getInventoryLocation, dispositionInventoryLocationInfoData} from "@/api/inventoryLocation";
import {isFirstLegRole, isOperate} from "@/utils/common";

export default {
  name: "DispositionInventoryLocationInfo",
  props:{
    suitId:{
      type: Number,
    },
    type:{
      type: Number,
      default: 1,
    },
  },
  data(){
    return {
      dispositionInventoryLocationDialog: false,
      goodsId: 0,
      inventoryLocation: '',
      inventoryLocationStr: '',
      inventoryLocationArr: [],
      options: [],
      dispositionInventoryLocationInfoLoading: false,
      strLoading: false,
      show_type: 1,
    }
  },
  methods:{
    isOperate,
    // 获取初始化数据
    dispositionInventoryLocation(suitId){
      this.options = []
      this.dispositionInventoryLocationDialog = true
      getGoodsInventoryLocation(suitId)
        .then(res=>{
          this.goodsId = suitId
          this.inventoryLocation = res.data.inventoryLocation
          this.inventoryLocationStr = res.data.inventoryLocationStr
          this.inventoryLocationArr = res.data.inventoryLocationArr
          this.show_type = res.data.show_type
          this.getInventoryLocationData()
        })
    },
    // 根据库位基因转换为的数组去查询各库位的信息
    getInventoryLocationData(){
      // this.options = []
      this.strLoading = true
      const postData = {
        inventoryLocationArr: this.inventoryLocationArr,
        show_type: this.show_type,
      }
      getInventoryLocation(postData)
        .then(res=>{
          if (res.error === 0) {
            this.strLoading = false
            this.options = res.data
            this.inventoryLocation = res.info.inventoryLocation
            this.inventoryLocationStr = res.info.inventoryLocationStr
            this.inventoryLocationArr = res.info.inventoryLocationArr
          } else {
            this.$errorMessage(res.message)
          }
        })
    },
    // 选择库位是触发重新查询库位信息
    saveInventoryLocationOptions(level, id){
      level = level -1
      if (level >= 0) {
        if (level < this.inventoryLocationArr.length) {
          // 替换值
          this.inventoryLocationArr.splice(level, 1, id);
          // 删除该位置之后的值
          this.inventoryLocationArr.splice(level + 1);
        } else {
          this.inventoryLocationArr[level] = id;
        }
      }
      this.getInventoryLocationData()
    },
    // 配置商品的库位信息
    dispositionInventoryLocationInfoData(){
      if (this.inventoryLocationArr.length <= 0) {
        this.$errorMessage(this.$t('table.inventoryLocation.请选择存放的库位'))
        return false
      }
      const postData = {
        'goodsId': this.goodsId,
        'inventoryLocation': this.inventoryLocation,
        'inventoryLocationArr': this.inventoryLocationArr,
      }
      this.dispositionInventoryLocationInfoLoading = true
      dispositionInventoryLocationInfoData(postData)
        .then(res=>{
          this.dispositionInventoryLocationInfoLoading = false
          if (res.error === 0) {
            this.$successMessage(res.message)
            this.dispositionInventoryLocationDialog = false
            this.$emit('change');
          } else {
            this.$errorMessage(res.message)
          }
        })
    },
    // 跳转至库位列表
    jumpInventoryLocationList(){
      this.$router.push({
        name: 'inventoryLocationList',
      })
    },
    // 切换库位类型
    changeOption() {
      this.inventoryLocationArr = []
      this.getInventoryLocationData()
    },
  }
}
</script>

<style scoped lang="scss">

</style>
